<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HealthHub - 个人中心</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 配置Tailwind主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <!-- 引入一些字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
    <!-- 主容器 - 模拟手机屏幕 -->
    <div class="max-w-md mx-auto bg-white min-h-screen shadow-lg overflow-hidden pb-20">
        <!-- 顶部个人信息区域 -->
        <div class="relative">
            <!-- 背景图 -->
            <div class="h-40 bg-gradient-to-r from-primary to-indigo-600"></div>
            
            <!-- 设置按钮 -->
            <div class="absolute top-4 right-4 flex space-x-3">
                <button class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center text-white">
                    <i class="fas fa-bell"></i>
                </button>
                <button class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center text-white">
                    <i class="fas fa-gear"></i>
                </button>
            </div>
            
            <!-- 用户信息卡片 -->
            <div class="bg-white rounded-xl -mt-20 mx-4 p-4 shadow-sm relative z-10">
                <div class="flex">
                    <!-- 头像 -->
                    <div class="w-20 h-20 rounded-full bg-gray-200 border-4 border-white overflow-hidden -mt-12 shadow">
                        <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=200" 
                             alt="用户头像" class="w-full h-full object-cover">
                    </div>
                    
                    <!-- 用户基本信息 -->
                    <div class="ml-4 mt-1 flex-1">
                        <div class="flex justify-between items-center">
                            <h1 class="text-xl font-bold">张健康</h1>
                            <button class="px-3 py-1 text-xs bg-primary/10 text-primary rounded-full">编辑资料</button>
                        </div>
                        <p class="text-sm text-gray-500 mt-1">ID: health_2024</p>
                        <p class="text-sm mt-2">让健康成为一种生活方式 💪</p>
                    </div>
                </div>
                
                <!-- 数据统计 -->
                <div class="flex justify-between mt-4 pt-4 border-t border-gray-100">
                    <div class="text-center">
                        <p class="font-bold">128</p>
                        <p class="text-xs text-gray-500">关注</p>
                    </div>
                    <div class="text-center">
                        <p class="font-bold">356</p>
                        <p class="text-xs text-gray-500">粉丝</p>
                    </div>
                    <div class="text-center">
                        <p class="font-bold">86</p>
                        <p class="text-xs text-gray-500">动态</p>
                    </div>
                    <div class="text-center">
                        <p class="font-bold">42</p>
                        <p class="text-xs text-gray-500">收藏</p>
                    </div>
                </div>
            </div>
            
            <!-- 成就卡片 -->
            <div class="bg-white rounded-xl mt-4 mx-4 p-4 shadow-sm">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="font-medium">我的成就</h2>
                    <button class="text-xs text-primary">查看全部</button>
                </div>
                <div class="flex space-x-4 overflow-x-auto pb-2">
                    <div class="flex-shrink-0 w-16">
                        <div class="w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center">
                            <i class="fas fa-person-running text-yellow-500 text-xl"></i>
                        </div>
                        <p class="text-center text-xs mt-1">运动达人</p>
                    </div>
                    <div class="flex-shrink-0 w-16">
                        <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center">
                            <i class="fas fa-seedling text-green-500 text-xl"></i>
                        </div>
                        <p class="text-center text-xs mt-1">健康生活</p>
                    </div>
                    <div class="flex-shrink-0 w-16">
                        <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center">
                            <i class="fas fa-medal text-blue-500 text-xl"></i>
                        </div>
                        <p class="text-center text-xs mt-1">跑步精英</p>
                    </div>
                    <div class="flex-shrink-0 w-16">
                        <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center">
                            <i class="fas fa-moon text-purple-500 text-xl"></i>
                        </div>
                        <p class="text-center text-xs mt-1">睡眠达人</p>
                    </div>
                    <div class="flex-shrink-0 w-16">
                        <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center opacity-40">
                            <i class="fas fa-lock text-gray-400 text-xl"></i>
                        </div>
                        <p class="text-center text-xs mt-1 text-gray-400">未解锁</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 功能模块区域 -->
        <div class="p-4">
            <!-- 会员卡 -->
            <div class="bg-gradient-to-r from-yellow-500 to-amber-500 rounded-xl p-4 text-white shadow-sm mb-5">
                <div class="flex justify-between items-center">
                    <div>
                        <h3 class="font-semibold">HealthHub Premium</h3>
                        <p class="text-sm opacity-90 mt-1">尊享高级会员特权</p>
                    </div>
                    <button class="px-3 py-1 bg-white text-amber-500 rounded-full text-xs font-medium">立即开通</button>
                </div>
                <div class="flex items-center mt-3">
                    <div class="flex -space-x-1">
                        <div class="w-6 h-6 rounded-full border-2 border-amber-500 bg-white text-amber-500 flex items-center justify-center text-xs">
                            <i class="fas fa-crown"></i>
                        </div>
                        <div class="w-6 h-6 rounded-full border-2 border-amber-500 bg-white text-amber-500 flex items-center justify-center text-xs">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div class="w-6 h-6 rounded-full border-2 border-amber-500 bg-white text-amber-500 flex items-center justify-center text-xs">
                            <i class="fas fa-heart"></i>
                        </div>
                    </div>
                    <span class="text-xs opacity-90 ml-2">解锁高级数据分析，个性化健康建议等多项特权</span>
                </div>
            </div>

            <!-- 功能快捷入口 -->
            <div class="bg-white rounded-xl shadow-sm mb-5 divide-y divide-gray-100">
                <!-- 健康档案 -->
                <div class="p-4">
                    <a href="#" class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                                <i class="fas fa-file-medical text-blue-500"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">我的健康档案</h3>
                                <p class="text-xs text-gray-500 mt-1">管理个人健康记录和报告</p>
                            </div>
                        </div>
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </a>
                </div>
                
                <!-- 我的设备 -->
                <div class="p-4">
                    <a href="#" class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                                <i class="fas fa-watch text-green-500"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">我的设备</h3>
                                <p class="text-xs text-gray-500 mt-1">管理已连接的健康设备</p>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <span class="text-xs bg-green-100 text-green-600 px-2 py-0.5 rounded mr-2">2个设备已连接</span>
                            <i class="fas fa-chevron-right text-gray-300"></i>
                        </div>
                    </a>
                </div>
                
                <!-- 目标设置 -->
                <div class="p-4">
                    <a href="#" class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
                                <i class="fas fa-bullseye text-indigo-500"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">目标设置</h3>
                                <p class="text-xs text-gray-500 mt-1">设置和管理您的健康目标</p>
                            </div>
                        </div>
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </a>
                </div>
            </div>

            <!-- 其他功能入口 -->
            <div class="bg-white rounded-xl shadow-sm mb-6">
                <div class="grid grid-cols-4 gap-4 p-4">
                    <a href="#" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-xl bg-red-100 flex items-center justify-center mb-1">
                            <i class="fas fa-heart text-red-500"></i>
                        </div>
                        <span class="text-xs">健康评估</span>
                    </a>
                    <a href="#" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-xl bg-purple-100 flex items-center justify-center mb-1">
                            <i class="fas fa-medal text-purple-500"></i>
                        </div>
                        <span class="text-xs">我的勋章</span>
                    </a>
                    <a href="#" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center mb-1">
                            <i class="fas fa-message text-blue-500"></i>
                        </div>
                        <span class="text-xs">我的咨询</span>
                    </a>
                    <a href="#" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center mb-1">
                            <i class="fas fa-wallet text-green-500"></i>
                        </div>
                        <span class="text-xs">健康钱包</span>
                    </a>
                    <a href="#" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-xl bg-amber-100 flex items-center justify-center mb-1">
                            <i class="fas fa-calendar-check text-amber-500"></i>
                        </div>
                        <span class="text-xs">健康日记</span>
                    </a>
                    <a href="#" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-xl bg-pink-100 flex items-center justify-center mb-1">
                            <i class="fas fa-gift text-pink-500"></i>
                        </div>
                        <span class="text-xs">健康商城</span>
                    </a>
                    <a href="#" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-xl bg-teal-100 flex items-center justify-center mb-1">
                            <i class="fas fa-headset text-teal-500"></i>
                        </div>
                        <span class="text-xs">客户服务</span>
                    </a>
                    <a href="#" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-xl bg-gray-100 flex items-center justify-center mb-1">
                            <i class="fas fa-ellipsis text-gray-500"></i>
                        </div>
                        <span class="text-xs">更多</span>
                    </a>
                </div>
            </div>

            <!-- 设置与帮助 -->
            <div class="bg-white rounded-xl shadow-sm mb-8 divide-y divide-gray-100">
                <!-- 系统设置 -->
                <div class="p-4">
                    <a href="#" class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center mr-3">
                                <i class="fas fa-gear text-gray-500"></i>
                            </div>
                            <h3 class="font-medium">系统设置</h3>
                        </div>
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </a>
                </div>
                
                <!-- 隐私设置 -->
                <div class="p-4">
                    <a href="#" class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center mr-3">
                                <i class="fas fa-lock text-gray-500"></i>
                            </div>
                            <h3 class="font-medium">隐私设置</h3>
                        </div>
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </a>
                </div>
                
                <!-- 帮助中心 -->
                <div class="p-4">
                    <a href="#" class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center mr-3">
                                <i class="fas fa-circle-question text-gray-500"></i>
                            </div>
                            <h3 class="font-medium">帮助中心</h3>
                        </div>
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </a>
                </div>
                
                <!-- 关于我们 -->
                <div class="p-4">
                    <a href="#" class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center mr-3">
                                <i class="fas fa-info-circle text-gray-500"></i>
                            </div>
                            <h3 class="font-medium">关于我们</h3>
                        </div>
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-gray-200 px-6 py-2">
            <div class="flex justify-between items-center">
                <a href="health_app_home.html" class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-home text-xl"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="health_app_data.html" class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-chart-line text-xl"></i>
                    <span class="text-xs mt-1">数据</span>
                </a>
                <div class="relative -mt-5">
                    <button class="w-14 h-14 rounded-full bg-gradient-to-r from-primary to-indigo-600 flex items-center justify-center shadow-lg text-white">
                        <i class="fas fa-plus text-xl"></i>
                    </button>
                </div>
                <a href="health_app_community.html" class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-users text-xl"></i>
                    <span class="text-xs mt-1">社区</span>
                </a>
                <a href="#" class="flex flex-col items-center text-primary">
                    <i class="fas fa-user text-xl"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </div>
    </div>
</body>
</html> 